<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Carousel Widget: Image and Text Example</title>
        <!-- Some basic styles for all examples -->
        <link type="text/css" rel="stylesheet" href="css/common.css">
        <!-- Style the container, and set dimensions for the list items -->
        <link type="text/css" rel="stylesheet" href="css/carousel.css">
        <!-- Dependencies -->
        <link type="text/css" rel="stylesheet"
              href="../../../build/logger/assets/skins/sam/logger.css">
        <link type="text/css" rel="stylesheet"
              href="../../../build/carousel/assets/skins/sam/carousel.css">
        <script src="../../../build/yahoo/yahoo-debug.js"></script>
        <script src="../../../build/dom/dom-debug.js"></script>
        <script src="../../../build/event/event-debug.js"></script>
        <script src="../../../build/logger/logger-debug.js"></script>
        <script src="../../../build/animation/animation-debug.js"></script>
        <script src="../../../build/element/element-debug.js"></script>
        <script src="../../../build/carousel/carousel-beta-debug.js"></script>
        <!-- Styles specific for this example only. -->
        <style type="text/css">
            .yui-carousel-element li {
                height: 158px;
                text-align: left;
            }

            #container {
                font-size: 13px;
                margin: 0 auto;
            }

            #container a {
                text-decoration: none;
            }
            
            #container .intro {
                display: inline;
                margin: 0px 14px 0px 4px;
                width: 202px;
            }
            
            #container .item {
                display: inline;
                margin: 0 22px 0 12px;
                overflow: hidden;
                padding-right: 80px;
                width: 106px;
            }

            #container .item .authimg {
                bottom: 2px;
                margin-left: 61px;
                position: absolute;
                z-index: 1;
            }
            
            #container .item h3 {
                line-height: 85%;
                margin-top: 4px;
            }
            
            #container .item h3 a {
                font: 77% Arial, sans-serif;
                position: relative;
                text-transform: uppercase;
                z-index: 2;
            }
            
            #container .item h3 a:link {
                color:#35a235;
            }
            
            #container .item h4 {
                margin-top:5px;
            }
            
            #container .item h4 a {
                font: 100% Georgia, Times, serif;
                position: relative;
                z-index:2;
            }

            #container .item h4 a:link {
                color:#00639b;
            }
            
            #container .item cite {
                color: #888;
                display: block;
                font-size: 77%;
                line-height: normal;
                margin-bottom: 30px;
            }
            
            #container .item p.all {
                bottom: 25px;
                position: absolute;
                z-index: 2;
            }
            
            #container .item p.all a {
                font-weight: bold;
                font-size: 85%;
            }
        </style>
        <script>
            (function () {
                var myLogReader, carousel;
                
                YAHOO.util.Event.onDOMReady(function (ev) {
                    var myLogReader = new YAHOO.widget.LogReader(),
                        carousel    = new YAHOO.widget.Carousel("container", {
                            animation: { speed: 0.5 }
                        });
                        
                    carousel.render(); // get ready for rendering the widget
                    carousel.show();   // display the widget
                });
            })();
        </script>
    </head>
    <body class="yui-skin-sam">
        <div id="main">
            <div class="promo">
                <h1>Carousel Widget: Image and Text Example</h1>
                <div class="intro">
                    <p>
                        This example uses the YUI Carousel Widget to showcase an
                        example where each (list) item contains and image and
                        some text.  As always, you can use arrow keys to select
                        items, as well as click on an item to select it.
                    </p>
                    <p>
                        Also in this example, you will see the animation
                        capabilities available in the YUI Carousel Widget.  For
                        getting an animated effect during scroll, you will have
                        to set the "animation" configuration setting in the YUI
                        Carousel Widget's constructor, apart from including the
                        YUI Animation utility.
                    </p>
                </div>
                <div class="example-container">
                    <!-- The Carousel container -->
                    <div id="container">
                        <ol id="carousel">
                            <li class="intro">
                                <a href="http://health.yahoo.com/experts/">
                                    <img width="202" height="162" border="0"
                                         alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
                                         src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
                                </a>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">
                                    <img width="125" height="154" border="0"
                                         alt="Leslie Baumann, M.D."
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/skintype/12135/skin-treatments-for-brides-to-be/">
                                Skin Treatments for…</a></h4>
                                <cite>Posted Thu 5.1.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/skintype/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">
                                    <img width="125" height="154" border="0"
                                         alt="Deepak Chopra, M.D."
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DeepakChopra_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/">
                                How You Think About Illness…</a></h4>
                                <cite>Posted Thu 5.1.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/deepak/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="Christine McKinney, M.S., R.D., C.D.E."
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
                                Christine McKinney, M.S., R.D., C.D.E.</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/">
                                Fat: How Much Is Enough of a…</a></h4>
                                <cite>Posted Thu 5.1.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/nutrition/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="Dr. Maoshing Ni"
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/MaoshingNi_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">Dr. Maoshing Ni</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/drmao/13738/centenarian-tips-for-a-long-life/">
                                Centenarian Tips for a Long…</a></h4>
                                <cite>Posted Tue 4.29.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/drmao/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="Lillie Shockney, R.N., M.A.S."
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LillieShockney_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
                                Lillie Shockney, R.N., M.A.S.</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/breastcancer/5673/are-you-being-over-or-undertreated/">
                                Are You Being Over- or…</a></h4>
                                <cite>Posted Tue 4.29.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/breastcancer/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="David Neubauer, M.D."
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">David Neubauer, M.D.</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/depression/12445/could-a-breast-cancer-treatment-help-bipolar-disorder/">
                                Could a Breast Cancer…</a></h4>
                                <cite>Posted Tue 4.29.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/depression/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/capessa/bio/capessa/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="Jennifer Tuma-Young"
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Capessa_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/capessa/bio/capessa/">Jennifer Tuma-Young</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/capessa/3473/relieve-stress-with-your-senses/">
                                Relieve Stress With Your…</a></h4>
                                <cite>Posted Mon 4.28.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/capessa/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="Lucy Danziger, SELF Edit"
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LucyDanziger_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">Lucy Danziger, SELF Edit</a></h3>
                                <h4><a href="/experts/healthieryou/2639/de-stress-in-mere-minutes/">
                                De-Stress in Mere Minutes</a></h4>
                                <cite>Posted Mon 4.28.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/healthieryou/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="Simeon Margolis, M.D., Ph.D."
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/SimeonMargolis_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">Simeon Margolis, M.D., Ph.D.</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/healthnews/13879/alzheimer-s-and-dementia-will-you-be-affected/">
                                Alzheimer's and Dementia: Will…</a></h4>
                                <cite>Posted Mon 4.28.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/healthnews/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="item">
                                <a title="View Author's Biography" class="authimg"
                                   href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">
                                    <img width="125" height="154" border="0" class="lz"
                                         alt="Mallika Chopra, IntentBlog"
                                         src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Intentblog_carousel.png"/>
                                </a>
                                <h3><a href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">Mallika Chopra, IntentBlog</a></h3>
                                <h4><a href="http://health.yahoo.com/experts/intentblog/2919/treating-a-sore-throat/">
                                Treating a Sore Throat</a></h4>
                                <cite>Posted Mon 4.28.08</cite>
                                <p class="all"><a href="http://health.yahoo.com/experts/intentblog/">View All Posts &raquo;</a></p>
                            </li>
                            <li class="intro">
                                <a href="http://health.yahoo.com/experts/">
                                    <img width="202" height="162" border="0"
                                         alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
                                         src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
                                </a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
            <h2>Using the Carousel Widget for displaying items with images and text</h2>
            <p>
                This example has the following dependencies:
            </p>
<textarea rows="5" cols="110" readonly>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/carousel/assets/skins/sam/carousel.css">
<script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.2/build/carousel/carousel-beta-min.js"></script>
</textarea>
            <p>
                This example uses progressive enhancement.  So, the Carousel is
                created from an "ordered" list of elements.
            </p>
<textarea rows="31" cols="110" readonly>
<div id="container">
  <ol id="carousel">
    <li class="intro">
      <a href="/experts/">
        <img width="202" height="162" border="0"
             alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
             src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
      </a>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">
        <img width="125" height="154" border="0"
             alt="Leslie Baumann, M.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/skintype/12135/skin-treatments-for-brides-to-be/">
      Skin Treatments for…</a></h4>
      <cite>Posted Thu 5.1.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/skintype/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">
        <img width="125" height="154" border="0"
             alt="Deepak Chopra, M.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DeepakChopra_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3>
      <h4><a href="/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/">
      How You Think About Illness…</a></h4>
      <cite>Posted Thu 5.1.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/deepak/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
        <img width="125" height="154" border="0" class="lz"
          alt="Christine McKinney, M.S., R.D., C.D.E."
          src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">
      Christine McKinney, M.S., R.D., C.D.E.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/">
      Fat: How Much Is Enough of a…</a></h4>
      <cite>Posted Thu 5.1.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/nutrition/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">
        <img width="125" height="154" border="0" class="lz"
             alt="Dr. Maoshing Ni"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/MaoshingNi_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">Dr. Maoshing Ni</a></h3>
      <h4><a href="http://health.yahoo.com/experts/drmao/13738/centenarian-tips-for-a-long-life/">
      Centenarian Tips for a Long…</a></h4>
      <cite>Posted Tue 4.29.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/drmao/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
        <img width="125" height="154" border="0" class="lz"
             alt="Lillie Shockney, R.N., M.A.S."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LillieShockney_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
      Lillie Shockney, R.N., M.A.S.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/breastcancer/5673/are-you-being-over-or-undertreated/">
      Are You Being Over- or…</a></h4>
      <cite>Posted Tue 4.29.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/breastcancer/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">
        <img width="125" height="154" border="0" class="lz"
             alt="David Neubauer, M.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">David Neubauer, M.D.</a></h3>
      <h4><a href="http://health.yahoo.com/experts/depression/12445/could-a-breast-cancer-treatment-help-bipolar-disorder/">
      Could a Breast Cancer…</a></h4>
      <cite>Posted Tue 4.29.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/depression/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/capessa/bio/capessa/">
        <img width="125" height="154" border="0" class="lz"
             alt="Jennifer Tuma-Young"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Capessa_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/capessa/bio/capessa/">Jennifer Tuma-Young</a></h3>
      <h4><a href="http://health.yahoo.com/experts/capessa/3473/relieve-stress-with-your-senses/">
      Relieve Stress With Your…</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/capessa/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">
        <img width="125" height="154" border="0" class="lz"
             alt="Lucy Danziger, SELF Edit"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/LucyDanziger_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">Lucy Danziger, SELF Edit</a></h3>
      <h4><a href="http://health.yahoo.com/experts/healthieryou/2639/de-stress-in-mere-minutes/">
      De-Stress in Mere Minutes</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/healthieryou/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">
        <img width="125" height="154" border="0" class="lz"
             alt="Simeon Margolis, M.D., Ph.D."
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/SimeonMargolis_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">Simeon Margolis, M.D., Ph.D.</a></h3>
      <h4><a href="/experts/healthnews/13879/alzheimer-s-and-dementia-will-you-be-affected/">
      Alzheimer's and Dementia: Will…</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/healthnews/">View All Posts &raquo;</a></p>
    </li>
    <li class="item">
      <a title="View Author's Biography" class="authimg"
         href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">
        <img width="125" height="154" border="0" class="lz"
             alt="Mallika Chopra, IntentBlog"
             src="http://d.yimg.com/origin1.lifestyles.yahoo.com/ls/he/blogs/carousel/Intentblog_carousel.png"/>
      </a>
      <h3><a href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">Mallika Chopra, IntentBlog</a></h3>
      <h4><a href="http://health.yahoo.com/experts/intentblog/2919/treating-a-sore-throat/">
      Treating a Sore Throat</a></h4>
      <cite>Posted Mon 4.28.08</cite>
      <p class="all"><a href="http://health.yahoo.com/experts/intentblog/">View All Posts &raquo;</a></p>
    </li>
    <li class="intro">
      <a href="http://health.yahoo.com/experts/">
        <img width="202" height="162" border="0"
             alt="Health Expert Advice: Leading experts share advice, tips and personal experiences."
             src="http://l.yimg.com/us.yimg.com/i/us/he/gr/v4/carouselintro.png"/>
      </a>
    </li>
  </ol>
</div>
</textarea>
            <p>
                Apart from setting the height of the Carousel, we have some
                more CSS rules to position the text and the images within
                the Carousel items.
            </p>
<textarea rows="15" cols="110" readonly>
.yui-carousel-element li {
    height: 158px;
}

#container {
    font-size: 13px;
}

#container a {
    text-decoration: none;
}

#container .intro {
    display: inline;
    float: left;
    margin: 0px 14px 0px 4px;
    width: 202px;
}

#container .item {
    display: inline;
    float: left;
    margin: 0 22px 0 12px;
    overflow: hidden;
    padding-right: 80px;
    width: 106px;
}

#container .item .authimg {
    bottom: 2px;
    margin-left: 61px;
    position: absolute;
    z-index: 1;
}

#container .item h3 {
    line-height: 85%;
    margin-top: 4px;
}

#container .item h3 a {
    font: 77% Arial, sans-serif;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
}

#container .item h3 a:link {
    color:#35a235;
}

#container .item h4 {
    margin-top:5px;
}

#container .item h4 a {
    font: 100% Georgia, Times, serif;
    position: relative;
    z-index:2;
}

#container .item h4 a:link {
    color:#00639b;
}

#container .item cite {
    color: #888;
    display: block;
    font-size: 77%;
    line-height: normal;
    margin-bottom: 30px;
}

#container .item p.all {
    bottom: 25px;
    position: absolute;
    z-index: 2;
}

#container .item p.all a {
    font-weight: bold;
    font-size: 85%;
}
</textarea>
            <p>
                Since we have the elements in place, we can invoke the
                Carousel's constructor to create the widget.  We'll pass an
                additional argument to the constructor, to set the animation
                speed.  The "animation" configuration setting is an object
                that takes in the speed (to scroll) in seconds, and the
                animation effect.
            </p>
<textarea rows="8" cols="110" readonly>
YAHOO.util.Event.onDOMReady(function (ev) {
  var carousel = new YAHOO.widget.Carousel("container", {
    animation: { speed: 0.5 }
  });
  carousel.render(); // get ready for rendering the widget
  carousel.show();   // display the widget
}
</textarea>
            <p>
                Lets assemble everything together.  The full JavaScript reads
                as follows:
            </p>
<textarea rows="13" cols="110" readonly>
(function () {
  var myLogReader, carousel;
  
  YAHOO.util.Event.onDOMReady(function (ev) {
    var myLogReader = new YAHOO.widget.LogReader(),
        carousel    = new YAHOO.widget.Carousel("container", {
          animation: { speed: 0.5 }
        });
        
    carousel.render(); // get ready for rendering the widget
    carousel.show();   // display the widget
  });
})();
</textarea>
        </div>
    </body>
</html>
